import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Dropdown, Space, Button } from 'antd';
import { RightSquareOutlined } from '@ant-design/icons';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import Indentation from '@/components/Indentation';
import FormSet from './components/FormSet';
import SearchCondition from '@/components/SearchCondition';
const AnsweringCampusClassRoom = (props) => {
    const { loading, dispatch, list } = props;
    const [visible, setVisible] = useState(false);

    const [selectList, setSelectList] = useState([])
    const [params, setParams] = useState({})
    const childRef = useRef();

    const btnExtra = [
        {
            text: '新增',
            onClick: () => {
                setVisible({
                    show: true
                })
            }
        }
    ]

    useEffect(() => {
        fetchSelectData()
    }, [])
    const searchItems = [
        {
            label: '教室名称',
            name: 'classroomName',
        },
        {
            label: '校区',
            name: 'campusId',
            type: 'select',
            select: selectList,
            fieldNames: {
                label: 'campusName',
                value: 'id',
            }
        },
    ];
    const fetchSelectData = () => {
        dispatch({
            type: 'answering/fetchListCampus',
            callback: (e) => {
                setSelectList(e)
            }
        })
    }
    const fetchData = () => {
        dispatch({
            type: 'answering/fetchListCampusClassroom',
        })
    }
    const getColumns = [
        {
            title: '教室名称',
            dataIndex: 'classroomName',
        },
        {
            title: '校区名称',
            dataIndex: 'campusName',
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    auth: true,
                    title: '编辑',
                    type: 'edit',
                    click: () => {
                        const { seatConfig } = record
                        setVisible({
                            show: true,
                            detail: {
                                ...record,
                                seatConfig: seatConfig ? JSON.parse(seatConfig) : {
                                    rowCount: 10,
                                    ColCount: 10,
                                    list: [],
                                    xList: [],
                                    yList: [],
                                    mapType: 'default'
                                }
                            }
                        })
                    },
                },
                {
                    auth: true,
                    title: '删除',
                    click: () => {
                        dispatch({
                            type: 'answering/fakeRemoveCampusClassroom',
                            payload: {
                                id: val
                            },
                            callback: () => {
                                fetchData()
                            }
                        })
                    },
                },
            ],
        },
    ];
    return (
        <>
            <TableDataBlock
                btnExtra={btnExtra}
                cRef={childRef}
                loading={loading}
                columns={getColumns}
                rowKey={(record) => `${record.id}`}
                pagination={false}
                searchItems={searchItems}
                dispatchType='answering/fetchListCampusClassroom'
                list={list}
            ></TableDataBlock>
            <FormSet selectList={selectList} handleCallback={fetchData} visible={visible} onClose={() => {
                setVisible(false)
            }}></FormSet>
        </>
    );
};
export default connect(({ loading, answering }) => ({
    list: answering.campusClassroomList,
    loading: loading.models.answering,
}))(AnsweringCampusClassRoom);
